<template>
  <div class="infoDetail-root">
    <div>
      <!--      <div class="ctlInfo-root-content-item">-->
      <!--        <div class="item-label"><i class="fa fa-envira label-icon" aria-hidden="true"></i>种子名称：</div>-->
      <!--        <div class="item-value">野罂粟</div>-->
      <!--      </div>-->
      <div class="ctlInfo-root-content-item">
        <div class="item-label"><i class="el-icon-user label-icon" aria-hidden="true"></i>采集人：
        </div>
        <div class="item-value">{{ item.nickName }}</div>
      </div>
      <div class="ctlInfo-root-content-item">
        <div class="item-label"><i class="el-icon-price-tag label-icon" aria-hidden="true"></i>采集类型：</div>
        <div class="item-value"> {{ getTypeStr(item.cltType) }}</div>
      </div>


      <div class="ctlInfo-root-content-item">
        <div class="item-label"><i class="el-icon-time label-icon" aria-hidden="true"></i>采集时间：</div>
        <div class="item-value">{{ item.collectionTime }}</div>
      </div>
      <div class="ctlInfo-root-content-item">
        <div class="item-label"><i class="el-icon-location-outline label-icon"></i>采集地点：</div>
        <div class="item-value">{{ item.location }}</div>
      </div>
      <div class="ctlInfo-root-content-item" v-if="$slots.default">
        <div class="item-label"><i class="el-icon-s-order label-icon"></i>详细信息：</div>
      </div>
      <div>
        <slot></slot>
      </div>

      <div class="ctlInfo-root-content-item">
        <div class="item-label"><i class="el-icon-picture-outline label-icon" aria-hidden="true"></i>照片：</div>
      </div>
      <div>
        <img @click="defaultBigPic" style="margin-left: 3px" v-for="item in picView" width="48%"
             :src="item.src"/>
      </div>
    </div>
  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, watch, computed } from '@vue/composition-api'
  import { MathUtil } from 'lark-utils'
  import { larkViewer } from 'lark-common'
  import { getPicUrl } from '@/api/industry/file'

  export default {
    name: 'infoDetail',
    props: {
      item: {
        type: Object,
        default: () => {
          return {
            resultId: '',
            nickName: '',
            collectionTime: '',
            location: '',
            imagePath: []

          }
        }
      }
    },
    setup(props, content) {
      let data = reactive({
        picUrlPre: getPicUrl + '/',
        cltType: [{ name: '种子', value: 1 }, { name: '标本', value: 2 }, { name: '土壤', value: 3 }, {
          name: '水分',
          value: 4
        }]
      })

      let picView = computed({
        get() {
          if (!props.item.imagePath) {
            return []
          }
          let result = []
          for (let i = 0; i < props.item.imagePath.length; i++) {
            if (result.length >= 2) {
              break
            }
            result.push({ src: data.picUrlPre + props.item.imagePath[i].fileName })
          }
          return result
        },
        set() {
        }
      })

      const getTypeStr = (value) => {
        console.log(value)
        let type = data.cltType.find(va => va.value == value)
        if (type != null) {
          return type.name
        } else {
          return value
        }
      }

      /**
       *
       * @param imgArr
       */
      const defaultBigPic = () => {
        //拿到图片List
        let imgList = []
        for (let i = 0; i < props.item.imagePath.length; i++) {
          imgList.push({ src: data.picUrlPre + props.item.imagePath[i].fileName })
        }
        larkViewer(imgList)
      }
      return { ...toRefs(data), defaultBigPic, picView, getTypeStr }
    }
  }
</script>

<style scoped lang="scss">
  .infoDetail-root {
    border-bottom-style: dashed;
    border-bottom-width: 1px;

    .ctlInfo-root-content-item {

      margin: 7px 0;
      display: flex;
      align-items: flex-end;

      .item-label {
        flex: 0 0 120px;
        align-self: flex-start;

        .label-icon {
          text-align: center;
          width: 20px;
          margin-right: 5px;
        }
      }

      .item-value {
        flex: 1 0;
      }

      .item-more {
        text-align: end;
        margin-right: 10px
      }

    }
  }
</style>
